/*
 * @Description: 失败行程页面
 * @Author: yingying.fan
 * @Date: 2019-04-01 11:01:26
 * @Last Modified by: zhenqiang.hong
 * @Last Modified time: 2019-04-23 18:24:59
 */
<template>
  <div id="app">
    <title-bar
      :titleText="pageTitle"
      :needBorder="true"
    ></title-bar>
    <div>
      <pay-order-list :getListByApi="getTotalUnpayList"></pay-order-list>
      <!-- <settlement-order @clickSettlement="settlement"></settlement-order> -->
      <div
        v-if="orderCount > 0"
        class="flex-h order-settlemet-wrapper"
      >
        <div class="flex-v flex-hc order-info">
          <div class="fontsize32">
            <span class="total-txt">合计：</span>
            <span class="total-value">{{orderTotalPrice}}元</span>
          </div>
        </div>
        <div
          class="fontsize32 total-price"
          @click="settlement(orderTotalPrice)"
        >
          去结算&nbsp;&nbsp;<i class="iconfont icon-rightangel fontsize20"></i>
        </div>
      </div>
      <!-- <pay-mode
        ref="paymode"
        :amount="orderTotalPrice"
      ></pay-mode> -->
    </div>
  </div>
</template>

<script>
import TitleBar from '@/components/titlebar/TitleBar'
import PayOrderList from './page/PayOrderList'
// import ConsumeList from '../consumelist/page/ConsumeList'
// import SettlementOrder from './components/paymode/SettlementOrder'
// import PayMode from './components/paymode/PayMode'
import PayModeJS from './components/paymode/PayModeJS'
import { getUnpayList } from './api/api.js'
import { getUrlParamByKey } from 'vue-xiaobu-utils'
export default {
  name: 'PayOrderList',
  components: {
    'title-bar': TitleBar,
    'pay-order-list': PayOrderList
    // 'pay-order-list': ConsumeList,
    // 'settlement-order': SettlementOrder,
    // 'pay-mode': PayMode
  },
  data() {
    return {
      pageTitle: '支付订单',
      orderTotalPrice: '',
      list: null,
      tradeNoList: null,
      orderCount: 0
    }
  },
  mounted() {

  },
  methods: {
    getTotalUnpayList() {
      return getUnpayList().then(body => {
        // this.orderTotalPrice = parseFloat(body.AMOUNT)
        this.list = body.LIST
        this.getTradeNoList()
        this.orderTotalPrice = body.AMOUNT
        this.orderCount = body.COUNT
        this.pageTitle = '支付订单(' + body.COUNT + ')'
        return body
      })
    },
    settlement() {
      PayModeJS.show(this.tradeNoList, this.orderTotalPrice, getUrlParamByKey('from'))
    },
    // 获取交易号列表
    getTradeNoList() {
      // console.log(111, this.$refs.payorderlist.getTradeNoList())
      if (this.tradeNoList === null) {
        this.tradeNoList = []
        this.list.map(monthMap => {
          monthMap.LIST.map(tradeItem => {
            this.tradeNoList.push(tradeItem.POS_BILL_NO)
          })
        })
      }
      return this.tradeNoList
    }
  }
}
</script>

<style>
html,
body,
#app {
  height: 100%;
}
#app {
  background-color: #f2f5f6;
  overflow: hidden;
}
.mescroll {
  height: calc(100% - 140px) !important;
  padding-bottom: 20px;
}
.order-settlemet-wrapper {
  width: 750px;
  height: 120px;
}
.order-info {
  width: 470px;
  height: 120px;
  padding-left: 30px;
  background: #fff;
}
.total-txt {
  font-weight: bold;
}
.total-value {
  font-weight: bold;
  color: #3795ff;
}
.order-count {
  color: #666;
  margin-top: 4px;
}
.total-price {
  width: 250px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  color: #fff;
  background: #3795ff;
}
</style>
